import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

// 需求是，在RParams中调用路由规则渲染出Role组件，规则路径是/role参数名称叫做userid
class RParams extends Component {
  state = {};
  render() {
    // console.log(this.props);
    return (
      <div>
        <Router>
          <Link to="/role/100">给Role组件传入用户id</Link>
          {/* <button
            onClick={() => {
              this.props.history.push("/role/" + Math.random());
            }}
          >
            给Role组件传入用户id
          </button> */}
          <Route path="/route2" component={Route2}></Route>
          <Route path="/role/:userid" component={Role}></Route>
        </Router>
      </div>
    );
  }
}

export default RParams;

class Route2 extends Component {
  state = {};
  render() {
    return (
      <div>
        <button
          onClick={() => {
            // console.log(this.props);
            this.props.history.push("/role/" + Math.random());
          }}
        >
          给Role组件传入用户id
        </button>
      </div>
    );
  }
}

function Role(props) {
  return (
    <div>
      {/* 接收传入的实参 */}
      {props.match.params.userid}
    </div>
  );
}
